<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
    <meta charset="utf-8">
    <title>Emoji plugin &mdash; CKEditor Sample</title>
    <script src="../../../ckeditor.js"></script>
    <link rel="stylesheet" href="../../../samples/css/samples.css">
</head>
<body>

<style>
    .adjoined-bottom:before {
        height: 270px;
    }

    .content ul.sample-data {
        margin: 0;
    }

    .content .sample-data p {
        font-size: 1rem;
        margin: 0;
    }

</style>

<nav class="navigation-a">
    <div class="grid-container">
        <ul class="navigation-a-left grid-width-70">
            <li><a href="https://ckeditor.com">Project Homepage</a></li>
            <li><a href="https://github.com/ckeditor/ckeditor-dev/issues">I found a bug</a></li>
            <li><a href="https://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork
                CKEditor on GitHub</a></li>
        </ul>
        <ul class="navigation-a-right grid-width-30">
            <li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
        </ul>
    </div>
</nav>

<header class="header-a">
    <div class="grid-container">
        <h1 class="header-a-logo grid-width-30">
            <img src="../../../samples/img/logo.svg"
                 onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample">
        </h1>
    </div>
</header>

<main>
    <div class="adjoined-top">
        <div class="grid-container">
            <div class="content grid-width-100">
                <h1>Emoji plugin with dropdown menu</h1>
                <p>This sample shows the progress of work on Emoji. Type &#8220; : &#8221; and 2 letters to start
                    inserting emoji.</p>
                <p>Some emoji to type in editor:</p>
                <ul class="sample-data">
                    <li><p>:beaming_face_with_smiling_eyes:</p></li>
                    <li><p>:skull:</p></li>
                    <li><p>:tractor:</p></li>
                    <li><p>:sparkles:</p></li>
                    <li><p>:bug:</p></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="adjoined-bottom">
        <div class="grid-container">
            <div class="grid-width-100">
                <div id="editor">
                    <h1>This is emoji sample.</h1>
                    <p>Type <code>:</code> and 2 letters to show suggestion box with emoji.</p>
                    <p>You can also select emoji icon in toolbar and select interesting emoji from drop down menu.</p>
                </div>
            </div>
        </div>
    </div>
</main>

<footer class="footer-a grid-container">
    <div class="grid-container">
        <p class="grid-width-100">
            CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
        </p>
        <p class="grid-width-100" id="copy">
            Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> &ndash; Frederico
            Knabben. All rights reserved.
        </p>
    </div>
</footer>
<script>
    'use strict';

    (function () {

        var editor = CKEDITOR.replace('editor', {
            extraPlugins: 'emoji',
            toolbarGroups: [
                {name: 'document', groups: ['mode', 'document', 'doctools']},
                {name: 'clipboard', groups: ['clipboard', 'undo']},
                {name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
                {name: 'forms', groups: ['forms']},
                {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
                {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']},
                {name: 'links', groups: ['links']},
                {name: 'colors', groups: ['colors']},
                '/',
                {name: 'insert', groups: ['insert']},
                {name: 'styles', groups: ['styles']},
                {name: 'tools', groups: ['tools']},
                {name: 'others', groups: ['others']},
                {name: 'about', groups: ['about']}
            ],

            removeButtons: 'Save,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Strike,Subscript,Superscript,CopyFormatting,RemoveFormat,Outdent,Indent,Blockquote,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,BidiLtr,BidiRtl,Language,Anchor,Flash,Image,Table,HorizontalRule,Smiley,SpecialChar,Iframe,PageBreak,Maximize,ShowBlocks,About'
        });

    })();
</script>

</body>
</html>
